<template>
  <div class="page_unReceivedStock">

    <van-sticky>
      <van-nav-bar
        :title="'待我领取的股份:'+ $route.query.num"
        left-arrow
        @click-left="$router.back()"
      >
        <template #right>
          <van-button type="info" round size="mini" style="margin-right: 10px;" @click="toReceivedAllStock">全部领取</van-button>
          <van-icon
            :name="!searchBoxShow ? 'search' : 'close'"
            size="20"
            @click="searchBoxShow = !searchBoxShow; toClearKeyWord(!!params.keyword)"
            style="font-size: 20px;"
          />
        </template>
      </van-nav-bar>

      <van-search
        v-show='searchBoxShow'
        v-model="params.keyword"
        placeholder="搜索手机号，用户昵称"
        show-action
        shape="round"
        @search="handleSearch"
        @clear="toClearKeyWord"
      >
        <div slot="action" @click="handleSearch">搜索</div>
      </van-search>

    </van-sticky>

    <div v-if="userInfoList.length" >
      <user-info
        v-for="(item) in userInfoList"
        :itemObj="item"
        :key="item.rowid"
      >
        <div class="right-detail" >
          <div class="isReceived"><van-tag type="warning">未领取{{item.take_stock}}股</van-tag></div>
          <div class="detail"><van-button type="info" size="small" @click="toApplyDetail(item)" >详情</van-button></div>
        </div>
      </user-info>

      <van-pagination
        v-show="total > 0"
        style="margin: 10px 0"
        v-model="params.pageIndex"
        :items-per-page="params.pageSize"
        :total-items="total"
        @change="changePagination"
      >
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>

    <van-divider style="margin-top: 100px" v-else>无记录</van-divider>
    <!-- <van-tabbar v-model="active"  fixed placeholder route  @change="onChange" v-if="$route.query.active==0">
      <van-tabbar-item :class="active==0?'van-tabbar-item--active':''"  icon="gift-o" >申请领取</van-tabbar-item>
      <van-tabbar-item  icon="gift-o" @click="nag({active:1,activetype:0})">注册领取</van-tabbar-item>
      <van-tabbar-item  @click="nag({url:''})" icon="gift-o" >发布领取</van-tabbar-item>
      <van-tabbar-item  icon="gift-o" @click="nag({active:2,activetype:0})">找工作</van-tabbar-item>
    </van-tabbar>
    <van-tabbar v-model="activetype"  fixed placeholder route active-color="#ee0a24"  v-if="active==1">
      <van-tabbar-item @click="nag({active:1,activetype:0})" :class="activetype==0?'van-tabbar-item--active':''" icon="gift-o" >注册领取</van-tabbar-item>
      <van-tabbar-item @click="nag({active:1,activetype:1})" :class="activetype==1?'van-tabbar-item--active':''" icon="gift-o">推广用户注册领取</van-tabbar-item>
    </van-tabbar>
    <van-tabbar v-model="activetype"  fixed placeholder route active-color="#ee0a24" @change="onChange" v-if="active==2">
      <van-tabbar-item @click="nag({active:2,activetype:0})" :class="activetype==0?'van-tabbar-item--active':''" icon="gift-o" >工作领取</van-tabbar-item>
      <van-tabbar-item @click="nag({active:2,activetype:1})" :class="activetype==1?'van-tabbar-item--active':''" icon="gift-o">推广用户工作领取</van-tabbar-item>
    </van-tabbar> -->
    <van-tabbar v-model="active"  fixed placeholder route  @change="onChange" v-if="$route.query.active==0">
      <van-tabbar-item :class="active==0?'van-tabbar-item--active':''"  icon="gift-o" >申请领取</van-tabbar-item>
      <van-tabbar-item  icon="gift-o" @click="nag({active:1,})">注册领取</van-tabbar-item>
      <van-tabbar-item  @click="nag({url:''})" icon="gift-o" >发布领取</van-tabbar-item>
      <van-tabbar-item  icon="gift-o" @click="nag({active:2,})">找工作</van-tabbar-item>
    </van-tabbar>
    <van-tabbar v-model="activetype"  fixed placeholder route active-color="#ee0a24"  v-if="active==1">
      <van-tabbar-item @click="activetype=0" :class="activetype==0?'van-tabbar-item--active':''" icon="gift-o" >注册领取</van-tabbar-item>
      <van-tabbar-item @click="activetype=1" :class="activetype==1?'van-tabbar-item--active':''" icon="gift-o">推广用户注册领取</van-tabbar-item>
    </van-tabbar>
    <van-tabbar v-model="activetype"  fixed placeholder route active-color="#ee0a24" @change="onChange" v-if="active==2">
      <van-tabbar-item @click="activetype=0" :class="activetype==0?'van-tabbar-item--active':''" icon="gift-o" >工作领取</van-tabbar-item>
      <van-tabbar-item @click="activetype=1" :class="activetype==1?'van-tabbar-item--active':''" icon="gift-o">推广用户工作领取</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import UserInfo from './components/userInfo';
import logoImg from '@/assets/logo.png';
import { Toast,  Dialog, } from "vant";

export default {
  name: "unReceivedStock",
  components: {
    UserInfo,
  },
  data(){
    return {
      active:this.$route.query.active||0,
      activetype:this.$route.query.activetype||0,
      name: "receivedStock",
      logoImg,
      userInfoList: [],
      showOverlay: false,
      searchBoxShow: false,
      total: 0,
      params: {
        keyword: '',
        pageIndex: 1,
        pageSize: 20
      },
    }
  },
  beforeMount(){
    
  },
  mounted(){
    this._getStocks()
  },
  watch:{
    '$route.query':{
        handler(newval){
          if(newval.hasOwnProperty('active')){
            this.active=newval.active
          }
          if(newval.hasOwnProperty('activetype')){
            this.activetype=newval.activetype
          }
        },
        deep:true
    }
  },
  methods: {
    nag(data){
      this.$router.push({path:'unReceivedStock',query:{num:this.$route.query.num,...data}})
    },
    onChange(){

    },
    async _getStocks() {
      let paramsObj = {
        // todo 若是加了分页、关键字搜索等参数，放开注释即可
        ...this.params,
        takeStatus: 0
      }
      // params.takeStatus = 1 //0未领取; 1已领取
      const res = await this.$api.others.getInvitatioStocks(paramsObj);
      if (res.code === 200){
        this.userInfoList = res.data.stocks || []
        this.total = res.data.count || 0
      };
    },
    handleSearch() {
      this.params.pageIndex = 1
      if(this.params.keyword.trim()){
        this._getStocks()
      } else {
        Toast('请先输入！');
      }
    },

    toClearKeyWord(isQuery = true){
      if(!isQuery){
        return
      };
      this.params.keyword = '';
      this.params.pageIndex = 1;

      this.$nextTick(() => {
        this._getStocks();
      })
    },

    changePagination(pageIndex) {
      console.log('翻页', pageIndex);
      this.params.pageIndex = pageIndex;
      this._getStocks();
    },

    toApplyDetail(item){
      // console.log(item);
      this.$router.push({
        name: 'applyDetail',
        query: {
          applyId: item.applyid,
          applyUserId: item.apply_userid,
        }}
      )
    },

    toReceivedAllStock(){
      Dialog.confirm({
        title: '温馨提示',
        message: '你确定全部领取吗？',
      }).then(async () => {
          // on confirm
        const res = await this.$api.others.takeInvitatioStock();
        if (res.code === 200){
          Toast(res?.data || '领取成功！');
          // 重新请求数据
          this.params.keyword = '';
          this.params.pageIndex = 1;
          this._getStocks();

        }}).catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page_unReceivedStock{
  width: 100%;
  .right-detail{
    text-align: center;
    .isReceived{
      margin-top: 6px;
      /deep/ .van-tag{
        padding: 2px;
      }
    }
    .detail{
      margin-top: 6px;
    }
  }
}
.van-tabbar-item{
  font-size:.28rem !important;
  text-align: center;

}

</style>
